// 使用react-redux
import React, { Component } from 'react';
import store from './store'//也可以根据目录选择
// 使用连接器
import {connect} from 'react-redux'
import { stat } from 'fs';
class TodoList extends Component {
    constructor(props) {
        super(props);
        // this.state =store.getState()
    }
    render() { 
        return ( 
         <div>
            <div>
                //-----关键代码--------start
                {/* <input value={this.state.inputValue} /> */}
                {/* <input value={this.props.inputValue} onChange={this.inputChange.bind(this)}/> */}
                  <input value={this.props.inputValue} onChange={this.props.inputChange}/>

                //-----关键代码--------end
                <button onClick={this.props.clickButton}>提交</button>
            </div>
            <ul>
                {/* <li>JSPang</li> */}
                {this.props.list.map((item,index)=>{
                return (<li key={index}>{item}</li>)
                })}
                
            </ul>
        </div>
         );
    }
    // inputChange(e){
    //     console.log(e.target.value)
    // }
}

const TodoList1 = (props)=>{
    let {inputValue ,inputChange,clickButton,list}=props
    return (
        <div>
        <div>
            //-----关键代码--------start
            {/* <input value={this.state.inputValue} /> */}
            {/* <input value={this.props.inputValue} onChange={this.inputChange.bind(this)}/> */}
              <input value={inputValue} onChange={inputChange}/>

            //-----关键代码--------end
            <button onClick={clickButton}>提交</button>
        </div>
        <ul>
            {/* <li>JSPang</li> */}
            {list.map((item,index)=>{
            return (<li key={index}>{item}</li>)
            })}
        </ul>
    </div>
    )
}
// 把store数据连接过来，转化为自己组件的props=》state映射props属性
const stateToProps = (state)=>{
    return {
        inputValue : state.inputValue,
        // 把list映射也做好
        list:state.list 
    }
}
const s= res=>{
    console.log(111)
}
// 另一个映射DispatchToProps
const dispatchToProps = (dispatch)=>{
    return {
        inputChange(e){
            console.log(e.target.value)
            // 开始派发action到state再到reducer
            let action = {
                type:'change_input',
                value:e.target.value
            }
            dispatch(action)

        },
        clickButton(){
            console.log(1111)
            let action = {type:'add_item'}
            dispatch(action)
        }
    }
}
// connect的作用是把UI组件（无状态组件）和业务逻辑代码的分开，然后通过connect再链接到一起，让代码更加清晰和易于维护。这也是React-Redux最大的有点。
export default connect(stateToProps,dispatchToProps)(TodoList1);